import React from "react";

const Info = () => {

    const navigate = React.$Router.useNavigate()

    const [searchParams, setSearchParams] = React.$Router.useSearchParams()

    const [id, setId] = React.useState(searchParams.get('id'))

    const [LoginAuth, setLoginAuth] = React.useState(React.$Cookies.load('LoginAuth')?React.$Cookies.load('LoginAuth'):{})

    const [product, setProduct] = React.useState({})

    const [thumbs, setThumbs] = React.useState([])

    const [starColor, setStarColor] = React.useState(0)


    React.useEffect(() => {
        getProductInfo()
    }, [])

    const getProductInfo = async () => {
        let result = await React.$Api.productInfo({ id,busid:LoginAuth.id })

        if (result) {
            if (result.code === 1) {
                setProduct(result.data.product)
                setThumbs(result.data.product.thumbs_cdn)
                let title = document.querySelector('#title')
                title.innerHTML = result.data.product.content
                setStarColor(result.data.collstatus)
            } else {
                React.$Vant.Toast({
                    type: 'fail',
                    message: result.msg,
                    onClose: () => {
                        navigate(-1)
                    }
                })
            }
        }
    }

    const Add = () => {
        if(JSON.stringify(LoginAuth)==='{}'){
            React.$Vant.Toast.fail('请先登录！')
            return false
        }
        React.$Cookies.save('Product', product, { path: '/' })
        navigate('/lease/lease/add')
    }

    const collection = async () => {
        if(JSON.stringify(LoginAuth)==='{}'){
            React.$Vant.Toast.fail('请先登录！')
            return false
        }
        let data = {
            busid: LoginAuth.id,
            proid: id
        }

        let result = await React.$Api.Collection(data);

        if(result.data==='add'){
            if(result.code===1){
                setStarColor(1);
            }else{
                React.$Vant.Toast.fail(result.msg)
            }
        }else{
            if(result.code===1){
                setStarColor(0);
            }else{
                React.$Vant.Toast.fail(result.msg)
            }
        }
    }

    const Star = () => {
        if (starColor === 0) {
            return (
                <React.$Vant.ActionBar.Icon
                    icon=<React.$Icons.StarO/>
                    text='收藏'
                    onClick={collection}
                />
            )

        } else {
            return (
                <React.$Vant.ActionBar.Icon
                    icon={<React.$Icons.Star color={'red'} />}
                    text='收藏'
                    onClick={collection}
                />
            )
        }
    }

    const Banner = () => {
        return (
            <div className="demo-swiper">
                <React.$Vant.Swiper>
                    {thumbs.map((item, index) => (
                        <React.$Vant.Swiper.Item key={index}>
                            <React.$Vant.Image style={{ height: '280px' }} lazyload src={item} />
                        </React.$Vant.Swiper.Item>
                    ))}
                </React.$Vant.Swiper>
            </div>
        )
    }

    return (
        <>
            <React.$Vant.NavBar
                title="商品详情"
                leftText="返回"
                onClickLeft={() => { navigate(-1) }}
            />

            <Banner />

            <div class="top_title">
                <div>{product.name}</div>
                <div class="money">
                    <h3>￥{product.rent_price}</h3>
                    <p style={{ color: 'rgb(101 101 101)' }}> 押金:￥{product.rent}</p>
                </div>
            </div>
            <div style={{padding:'10px'}} id="title"></div>

            <div className='demo-action-bar'>
                <React.$Vant.ActionBar>
                    <React.$Vant.ActionBar.Icon
                        icon={<React.$Icons.WapHomeO />}
                        text='首页'
                        onClick={() => navigate('/')}
                    />

                    <Star />

                    <React.$Vant.ActionBar.Button
                        color='#ff6c8d'
                        type='danger'
                        text='立即租赁'
                        onClick={Add}
                    />
                </React.$Vant.ActionBar>
            </div>
        </>
    )
}

export default Info;